[#385] feat(notification): SSE 실시간 알림 시스템 및 헤더 Popover UI 구현#387
Merged
Conversation
- 알림 목록을 popover 형태로 표시하는 HeaderNotificationPopover 컴포넌트 도입 - 기존 알림 placeholder를 제거하고 헤더 액션 영역에 통합
- 알림 타입을 Lucide 아이콘으로 매핑하는 유틸리티 함수 추가 - 알림 타겟을 라우트 href로 변환하는 매핑 로직 도입
- TanStack Query를 사용해 API 알림을 조회하는 useNotifications hook 추가 - API 타입에 맞게 notification 타입 및 아이콘 매핑 로직 업데이트 - HeaderNotificationPopover를 리팩터링하여 실제 알림 데이터를 표시하도록 수정 - 알림 타입에 맞는 아이콘을 적용하고, 타임스탬프를 포맷팅해 표시 - 기존 mock 데이터 및 사용되지 않는 아이콘 제거
- react-query의 useMutation을 활용한 useReadNotification hook 도입 - 알림을 읽음 상태로 변경하는 API 연동 처리 - 성공 시 notifications 쿼리를 invalidate하여 목록이 갱신되도록 구성
- 헤더 알림 popover에서 알림 클릭 시 읽음 상태로 변경되도록 로직 추가 - useReadNotification hook을 연동해 읽음 처리 API 호출 - 알림 링크의 onClick 핸들러를 수정해 사용자 액션과 읽음 처리 연결
- 모든 알림을 한 번에 읽음 처리하는 API 및 UI 로직 도입 - useReadAllNotifications hook을 추가해 전체 읽음 처리 mutation 구현
- 서버 전송 이벤트를 처리하는 NotificationSseProvider 도입 - 앱 레이아웃에 provider를 통합해 실시간 알림 업데이트를 활성화 - 인증된 사용자에 대해 실시간 알림 수신 및 toast 알림 표시 지원
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements a real-time notification system with SSE (Server-Sent Events) integration and a header popover UI for displaying notifications. The implementation includes API hooks for fetching and managing notification read states, along with real-time updates via EventSource.
Changes:
- Added
HeaderNotificationPopovercomponent with TanStack Query integration for displaying notifications in a popover - Implemented
NotificationSseProviderfor real-time notification updates via Server-Sent Events - Added notification API hooks (
useNotifications,useReadNotification,useReadAllNotifications) for data management - Integrated notification system into app layout and header
- Enhanced
searchAuctionsto support array query parameters - Updated search screen media query breakpoint from 1024px to 768px
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/widgets/header/ui/header-notification-popover.tsx | New component displaying notifications in a popover with read/unread state management |
| src/widgets/header/ui/header-actions.tsx | Integrated notification popover into header, removed TODO comment |
| src/features/notification/ui/notification-sse-provider.tsx | SSE provider for real-time notification updates with cache management |
| src/features/notification/api/use-notifications.ts | TanStack Query hooks for fetching and updating notifications |
| src/features/notification/model/types.ts | Type definitions for notification system |
| src/features/notification/model/notification-mapper.ts | Utility functions mapping notification types to icons and target URLs |
| src/shared/config/endpoints.ts | Added notification-related API endpoints |
| src/app/layout.tsx | Integrated NotificationSseProvider into app layout |
| src/screens/search/ui/search-screen.tsx | Updated media query breakpoint from lg (1024px) to md (768px) |
| src/screens/auction/auction-list/api/search-auctions.ts | Enhanced to handle array query parameters properly |
| next.config.ts | Formatting cleanup with duplicate hostname entry |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- 알림 popover에서 로딩, 에러, 빈 상태를 처리하도록 UX 개선 - 전체 읽음(mark all as read) 컨트롤의 동작과 사용성을 개선 - SSE provider 재연결 로직 추가 - 중복 알림 수신을 방지하고 연결 상태 관리 로직을 개선 - next.config.ts의 image remotePatterns를 정렬 및 커버리지 관점에서 정리
- 알림 읽음 처리 실패 시 toast 에러 알림을 표시하도록 추가 - SSE provider에서 연결 이슈 발생 시 경고 toast를 노출하고 중복 경고를 방지 - 전체 읽음 버튼에 aria-label을 추가
peachPetal
approved these changes
Jan 12, 2026
sehyun0518
approved these changes
Jan 12, 2026
sageherb
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📖 개요
실시간 알림 시스템 및 헤더 Popover UI 구현
📌 관련 이슈
🛠️ 상세 작업 내용
HeaderNotificationPopover컴포넌트 추가useNotifications훅 추가useReadNotification훅 도입useReadAllNotifications훅을 추가해 전체 읽음 처리 구현NotificationSseProvider도입✅ PR 체크리스트
pnpm build로 실행 테스트📸 스크린샷